<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-17 19:51:01
 * @LastEditTime: 2019-10-19 09:59:47
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="goodsInfo">
    <transition 
     @before-enter="beforeEnter"
     @enter="enter"
     @after-enter="afterEnter"
    >
      <div class="ball" v-show="showBall" ref="ball"></div>
    </transition>
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
            <swiper :lunbotuList="lunbotuList" :isFull="false"></swiper>
					</div>
				</div>
			</div>
      <div class="mui-card">
				<div class="mui-card-header">{{goodsInfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
            <span class="market_price">市场价：<span>￥{{goodsInfo.market_price}}</span></span>
            <span class="sell_price">销售价：<span>￥{{goodsInfo.sell_price}}</span></span>
            <div class="number">购买数量:<numberBox style="margin-left:10px" @getSelectedCount="getSelectedCount" :max="goodsInfo.stock_quantity"></numberBox></div>
          <div class="shopButton">
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
          </div>
				</div>
				</div>
			</div>
      <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
            <div>商品货号：{{goodsInfo.goods_no}}</div>
            <div>库存情况：{{goodsInfo.stock_quantity}}</div>
            <div>上架时间：{{goodsInfo.add_time}}</div>
					</div>
				</div>
				<div class="mui-card-footer">
          <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
          <mt-button type="danger" size="large" plain @click="goComments(id)">商品评论</mt-button>
        </div>
			</div>
  </div>
</template>
<script>
import swiper from '../subcomponents/swiper.vue'
import numberBox from '../subcomponents/goodsInfo-numberBox.vue'
import { Transform } from 'stream'
export default {
  data(){
    return{
      lunbotuList:[],
      id:this.$route.params.id,
      goodsInfo:{},
      number:1,
      showBall:false,
      selectCount:1
    }
  },
  created(){
    this.getLunBoTu()
    this.getGoodsInfo()
  },
  methods: {
    getLunBoTu(){
      this.$http.get('api/getthumimages/'+this.id).then(result=>{
        var res= result.body
        if(res.status===0){
          res.message.forEach(element => {
            element.img=element.src          
          });
          this.lunbotuList=res.message
        }
      })
    },
    getGoodsInfo(){
    this.$http.get('api/goods/getinfo/'+this.id).then(result=>{
        var res= result.body
        if(res.status===0){
          this.goodsInfo=res.message[0]
        }
      })
    },
    goDesc(id){
      this.$router.push({name:'goodsDesc',params:{id}})
    },
    goComments(id){
     this.$router.push({name:'goodsComments',params:{id}})
    },
    addToShopCar(){
      this.showBall=true;
      var goodsInfo={
        id:this.id,
        selectCount:this.selectCount,
        price:this.goodsInfo.sell_price,
        selected:false
      }
      this.$store.commit('addToShopCar',goodsInfo)
    },
    getSelectedCount(number){
      this.selectCount=number
      console.log(this.selectCount);
    },
    beforeEnter(el){
      el.style.transform="translate(0,0)"
    },
    enter(el,done){
      //触发重排重绘
      let elOH = el.offsetHeight;
      this.$nextTick( () => {
        const ballPos=this.$refs.ball.getBoundingClientRect();
        const badagePos= document.getElementById('badage').getBoundingClientRect();
        const xDist=badagePos.left-ballPos.left;
        const yDist=badagePos.top-ballPos.top;
        el.style.transform=`translate(${xDist}px,${yDist}px)`;
        el.transition="all 0.5s ease";
        el.addEventListener('transitionend', done);
      })
    },
    afterEnter(el){
      this.showBall=!this.showBall
    }

  },
  components:{
    swiper,
    numberBox
  }
}
</script>
<style lang="scss" scoped>
  .goodsInfo{
    position: relative;
    background-color: #eee;
    overflow: hidden;
    .ball{
     width: 16px;
     height: 16px;
     background-color: red;
     border-radius: 100px;
     position: absolute;
     top:380px;
     left:157px;
     z-index: 199;
   }
   .mui-card{
     .mui-card-header{
       font-size: 18px;
       font-weight: bold;
     }
     .mui-card-content-inner{
       font-size: 16px;
       padding-top: 25px;
       .market_price{
         span{
          text-decoration: line-through
         }
       }
       .sell_price{
         span{
           font-size: 16px;
           color: red;
         }
         margin-left: 10px;
       }
     
       .number{
        margin-top: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center
       }
       .shopButton{
         margin: 10px 0;
         button{
           width: 100px;
           height: 35px;
         }
       }
     }
      .mui-card-footer{
         display: block;
         button{
           margin: 10px 0;
         }
      }
    
   }
  
  }
</style>